<!-- 首页导航栏 -->
<template>
    <div class="main-box">
        <!--phone-->
        <div class="phone-main-guide-bar">
            <!--账号登录-->
            <account-component class="account-login-item" />
            <!--导航菜单-->
            <div class="guide-menu-box">
                <div class="menu-item" @click="changeGuideBarVisible">
                    <a-icon class="menu-icon" type="menu" />
                </div>
                <div class="guide-bar-box" v-if="guideBarVisible">
                    <div
                        class="guide-bar-item"
                        v-for="(item,index) of guideList"
                        v-bind:class="guideList.class"
                        v-bind:key="index"
                    >
                        <span
                            @click="toGuidePage(index,item)"
                        >{{item.title}}</span>
                    </div>
                </div>
            </div>
        </div>

        <!--pc-->
        <div class="pc-main-guide-bar">
            <div class="left-guide-bar">
                <!--账号登录-->
                <account-component class="account-login-item" />
                <!--搜索框-->
                <guide-bar-search-component v-if="searchVisible"/>
            </div>
            <!--栏目列表-->
            <div class="guide-bar-box" v-if="guideVisible">
                <!-- 遍历栏目列表 -->
<!--                <div-->
<!--                    class="guide-bar-item"-->
<!--                    v-bind:class="item.class"-->
<!--                    v-for="(item,index) of guideList"-->
<!--                    v-bind:key="index"-->
<!--                >-->
<!--                    <span-->
<!--                        @click="toGuidePage(index,item)"-->
<!--                    >{{item.title}}</span>-->
<!--                </div>-->
<!--0                -->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[0].class"
                    v-bind:key="0"
                >
                    <span
                        @click="toGuidePage(0,guideList[0])"
                    >{{guideList[0].title}}</span>
                </div>
<!--1-->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[1].class"
                    v-bind:key="1"
                >
                    <span
                        @click="toGuidePage(1,guideList[1])"
                    >{{guideList[1].title}}</span>
                </div>
<!--2-->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[2].class"
                    v-bind:key="2"
                >
                    <span
                        @click="toGuidePage(2,guideList[2])"
                    >{{guideList[2].title}}</span>
                </div>

<!--3-->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[3].class"
                    v-bind:key="3"
                >
                    <span
                        @click="toGuidePage(3,guideList[3])"
                    >{{guideList[3].title}}</span>
                </div>
<!--4-->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[4].class"
                    v-bind:key="4"
                >
                    <a
                        href="http://www.sslibrary.com/" target="_blank"
                    >{{guideList[4].title}}</a>
                </div>
<!--5-->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[5].class"
                    v-bind:key="5"
                >
                    <span
                        @click="toGuidePage(5,guideList[5])"
                    >{{guideList[5].title}}</span>
                </div>
<!--6-->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[6].class"
                    v-bind:key="6"
                >
                    <span
                        @click="toGuidePage(6,guideList[6])"
                    >{{guideList[6].title}}</span>
                </div>
<!--7-->
                <div
                    class="guide-bar-item"
                    v-bind:class="guideList[7].class"
                    v-bind:key="7"
                >
                    <span
                        @click="toGuidePage(7,guideList[7])"
                    >{{guideList[7].title}}</span>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
import AccountComponent from "./FunctionComponent/AccountComponent";
import GuideBarSearchComponent from "./FunctionComponent/GuideBarSearchComponent";
import {getTopicChild} from "../api/CommonApi";

const INDEX_ITEM = {
    title:'首页',
    path:'/index',
    code:'home',
}

export default {
    name: "MainGuideBar",
    components: {
        AccountComponent,
        GuideBarSearchComponent
    },
    props:{
        //搜索框是否可见
        searchVisible:{
            type:Boolean,
            default: true
        },
        guideVisible:{
            type:Boolean,
            default: true
        }
    },
    data(){
        return{
            // 导航栏列表
            guides:[],
            //导航栏搜索框是否可见
            guideBarVisible:false,
            //选中的页面编号
            active:0
        }
    },
    created(){
        this.loadMainGuiderData("cd")

    },

    computed:{
        guideList(){
           const list = [...this.guides];
           for(let item of list){
               item.class = {};
               if(this.$route.path === item.path || this.$route.path.indexOf(item.path) === 0)
                   item.class = {active : true}
           }
           return list;
        }
    },

    methods:{
        // 加载导航栏数据
        loadMainGuiderData(topicCode){
            getTopicChild(topicCode).then(res => {
                console.log("MainGuideBar = ",res)
                const result = res.result || []
                // 填充首页
                result.unshift(INDEX_ITEM)
                this.guides = result
            }).catch(err => {
               console.log(err)
            })
        },
        //点击首页菜单项时触发的导航事件
        toGuidePage(index, item){
            //标记前导航页
            this.active = index
            //跳转导航行
            this.$router.push({
                path:this.guides[index].path
            })




            // 向上抛出自定义事件
            this.$emit('change',index,item)

        },
        //移动端设置菜单栏是否可见
        changeGuideBarVisible(){
            this.guideBarVisible = !this.guideBarVisible;
        },

    },


}
</script>

<style lang="less" scoped>
@import "../assets/global.less";
.main-box{
    height: auto;
    min-height: auto!important;
}
@media only screen and (max-width:576px){
    .main-box{
        @width: 100vw;
        @height:6vh;
        width:@width;
        height:@height;
        .phone-main-guide-bar{
            width:@width;
            height:@height;
            background-color: rgba(0, 5, 34,0.4);
            display:flex;
            justify-content: space-between;
            align-items:center;
            //phone端账号登录
            .account-login-item{
                width:calc(28vw + 4vw);
            }
            //导航菜单
            .guide-menu-box{
                width:14vw;
                height:@height;
                display:flex;
                justify-content: center;
                align-items: center;
                position: relative;
                //菜单图标
                .menu-item{
                    width:14vw;
                    height:@height;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    .menu-icon{
                        font-size:6vw;
                    }
                }
                //菜单列表
                .guide-bar-box{
                    width:calc(@width / 4);
                    min-height:8vw;
                    position:absolute;
                    top:@height;
                    right:0;
                    display:flex;
                    flex-direction:column;
                    align-items: center;
                    transition:0.2s;
                    z-index:10;
                    .guide-bar-item{
                        background-color:rgba(0, 5, 34,0.4);
                        opacity: 0.8;
                        span{
                            width:calc(@width / 4);
                            height:8vw;
                            line-height:8vw;
                            text-align: center;
                            box-sizing:border-box;
                            padding:0 2vw;
                            font-size:4vw;
                            font-weight: normal;
                            color:white;
                            .line-ellipsis(1);
                            display:block;
                        }

                    }
                    .guide-bar-item:hover{
                        background-color: rgba(15, 121, 205, .3);
                    }

                }
            }
        }
        .pc-main-guide-bar{
            display:none;
        }
    }
    .active{
        background-color: rgba(15, 121, 205, .3);
    }
}

//pc
@media screen and (min-width: 576px){
    @min-width:1220px;
    @height:60px;
    width:100%;
    height: @height;
    .main-box{
        width:100%;
        height: @height;
        background-color:rgba(0, 5, 34,0.4);
        .phone-main-guide-bar{
            display:none;
        }
        .pc-main-guide-bar{
            width: 100%;
            min-width: @min-width;
            height: @height;
            background-color:rgba(0, 5, 34,0.4);
            flex-wrap: wrap;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left-guide-bar{
                display:flex;
                .account-login-item{
                    width:160px;
                    height: @height;
                }
            }
            .guide-bar-box{
                padding:0 10px;
                .guide-bar-item{
                    display: inline-block;
                    width: 95px;
                    height:@height;
                    text-align: center;
                    line-height: @height;
                    user-select: none;
                    color: #FFF;
                    transition: all .3s;
                    position: relative;
                    cursor: pointer;
                    span, a{
                        width: 85px;
                        height: @height;
                        display: inline-block;
                        font-size:14px;
                        font-weight: normal;
                        box-sizing: border-box;
                        padding:0 5px;
                        .line-ellipsis(1);
                        color:white;
                    }

                }
                .guide-bar-item:hover{
                    background-color:rgba(15, 121, 205, .3);
                }
                .guide-bar-item.active{
                    background-color: rgba(15, 121, 205, .3);
                }

            }

        }
    }
    .active{
        background-color: rgba(15, 121, 205, .3);
    }
}

</style>
